<template>
  <div v-loading="loading" class="main-content-container">
    <!-- 出库 -->
    <div ref="search" class="app-search">
      <el-form ref="searchFormRef" label-width="80px" :inline="true">
        <el-row type="flex">
          <el-col :span="12" class="searchs-y">
            <el-form-item>
              <el-input v-model="custQuery" placeholder="姓名、手机号、会员号" clearable @change="handleChange">
                <el-button slot="append" icon="el-icon-search" @click="handleChange" />
              </el-input>
            </el-form-item>
          </el-col>
        <!-- <el-col :span="12">
          <el-form ref="searchFormRef" label-width="80px" :inline="true">
            <el-form-item>
              <el-input v-model="custQuery" class="inputCss" placeholder="姓名、手机号、会员号" clearable @change="handleChange" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleChange">搜索顾客</el-button>
              <el-button @click="eliminate">清除</el-button>
            </el-form-item>
          </el-form>
        </el-col> -->
        </el-row>
        <el-row class="float-l">
          <Search :data="selections" :attribute="'createdTime'" @change="handleTypeChange" @dateChange="handleDateChange" />
          <el-form-item>
            <el-select v-model="sourceData.name" class="el-select-y" placeholder="请选择来源" :clearable="true" @change="sourceChange">
              <el-option
                v-for="item in sourceData"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="apply.name" class="el-select-y" placeholder="请选择申请方" :clearable="true" @change="applyChange">
              <el-option
                v-for="item in apply"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="warehouse.name" class="el-select-y" placeholder="请选择仓库" :clearable="true" @change="warehouseChange">
              <el-option
                v-for="item in warehouse"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-row>
      </el-form>
      <el-row class="mounteds">
        <Tabs v-model="receiveStatus" :data="tabsName" @change="searchChange" />
      </el-row>
    </div>
    <div class="box-show" :style="'height:'+ (innerHeight + 80) + 'px'">
      <el-table
        :data="tableData"
        style="width: 100%"
        border
        :row-class-name="tableColor"
        :height="innerHeight"
      >
        <el-table-column
          prop="receiveCode"
          label="领取单号"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="deptType"
          label="来源"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="deptName"
          label="申请方"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="customerName"
          label="顾客"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="createdTime"
          label="申请/开单时间"
          :show-overflow-tooltip="true"
          min-width="100"
        />
        <el-table-column
          prop="receiveUsr"
          label="申请/开单人"
          :show-overflow-tooltip="true"
          min-width="90"
        />
        <el-table-column
          prop="warehouseName"
          label="仓库"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="receiveStatus"
          label="状态"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="processor"
          label="操作员"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="outStockDate"
          label="出库时间"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="name"
          label="操作"
        >
          <template slot-scope="{ row }">
            <el-button v-if="row.receiveStatus==='待出库'" type="text" @click="handleDelivery(row.id)">出库</el-button>
            <el-button v-if="row.receiveStatus!=='待出库'" type="text" @click="handleDeliveryDetails(row.id)">详情</el-button>
            <el-button v-if="row.receiveStatus==='已出库'" type="text">打印</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination :page-num="queryParams.page" :page-size="queryParams.pageSize" :on-change="handlePaginationChange" :total="total" />
    </div>
    <Delivery ref="delivery" @success="getList()" />
    <DeliveryDetails ref="deliveryDetails" />
  </div>
</template>

<script>
import { selections } from "@/config";
import Search from "@/components/Search";
import Tabs from "@/components/SearchSelection";
import Delivery from "./delivery.vue";
import DeliveryDetails from "./deliveryDetails.vue";
import { tableColor, labelHeigh } from '@/utils/common.js';
export default {
  components: {
    Search,
    Tabs,
    Delivery,
    DeliveryDetails,
  },
  data() {
    return {
      tableColor,
      innerHeight: null,
      value: '',
      options: [{
        value: '选项1',
        label: '黄金糕',
      }],
      tableData: [],
      custQuery: "",
      queryParams: {
        page: 1,
        pageSize: this.$store.state.commonsettings.maxPageSize,
      },
      loading: false,
      sourceData: [],
      apply: [],
      warehouse: [],
      total: 0,
      selections,
      receiveStatus: "待出库",
      search: {
        receiveStatus: "待出库",
        timeType: "today",
        createdTime:
          new Date().getFullYear() +
          "-" +
          (new Date().getMonth() + 1) +
          "-" +
          new Date().getDate() +
          " 00:00:00" +
          "_" +
          new Date().getFullYear() +
          "-" +
          (new Date().getMonth() + 1) +
          "-" +
          new Date().getDate() +
          " 23:59:59",
      },
      tabsName: [
        { id: "全部", name: "全部" },
        { id: "待出库", name: "待出库" },
        { id: "已出库", name: "已出库" },
        { id: "已取消", name: "已取消" },
      ],
    };
  },
  mounted() {
    this.getList();
    this.getSourceList();
    this.getApplyList();
    this.getWarehouseList();
    this.$nextTick(() => {
      this.innerHeight = labelHeigh(this.$refs.search);
    });
  },
  methods: {
    handleDelivery(id) { // 出库
      this.$refs.delivery.delivery(id);
    },
    async sourceChange(val) {
      if (val) {
        this.search.deptType = val;
      } else {
        this.search.deptType = undefined;
      }
      this.getList();
    },
    async applyChange(val) {
      if (val) {
        this.search.deptId = val;
      } else {
        this.search.deptId = undefined;
      }
      this.getList();
    },
    async warehouseChange(val) {
      if (val) {
        this.search.warehouseId = val;
      } else {
        this.search.warehouseId = undefined;
      }
      this.getList();
    },
    getSourceList() {
      // 查询单据来源
      this.$api["seting/siteConsul/getDicoptList"]({
        query: { dictionaryId: "801496010844012544" },
      }).then((res) => {
        if (res.code !== 200) return this.$message.error("查询表格数据失败");
        this.sourceData = res.data.optionList;
        // return this.$message.success("查询表格数据成功");
      });
    },
    getApplyList() {
      // 查询申请方
      this.$api["warehouse/delivery/apply"]({}).then((res) => {
        if (res.code !== 200) return this.$message.error("查询申请方失败");
        this.apply = res.data;
        // return this.$message.success("查询表格数据成功");
      });
    },
    getWarehouseList() {
      // 查询申请方
      this.$api["warehouse/delivery/warehouse"]({}).then((res) => {
        if (res.code !== 200) return this.$message.error("查询申请方失败");
        this.warehouse = res.data;
        // return this.$message.success("查询表格数据成功");
      });
    },
    handleDeliveryDetails(id) { // 详情
      this.$refs.deliveryDetails.deliveryDetails(id);
    },
    searchChange(e) {
      // Tabs切换的方法函数
      Object.assign(this.search, { receiveStatus: e === "全部" ? "" : e });
      this.getList();
    },
    handleTypeChange(val) {
      Object.assign(this.search, val);
      this.getList();
    },
    handleDateChange(val) {
      Object.assign(this.search, val);
      this.getList();
    },
    eliminate() {
      this.custQuery = "";
      this.queryParams.page = 1;
      this.getList();
    },
    handleChange() {
      this.queryParams.page = 1;
      this.getList();
    },
    handlePaginationChange(pagination) {
      // 分页
      this.queryParams = {
        page: pagination.pageNum,
        pageSize: pagination.pageSize,
      };
      this.getList();
    },
    getList() {
      this.loading = true;
      this.$api['warehouse/delivery/receiptList']({ ...this.queryParams, query: this.search, custQuery: this.custQuery }).then((res) => {
        if (res.code !== 200) return this.$message.error(res.msg);
        this.loading = false;
        this.total = res.data.total;
        this.tableData = res.data.result;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
  .mounteds {
    margin-bottom: 10px;
  }
</style>
